import { useSelector, useDispatch } from "react-redux";
import { add, addList } from "../../store/modules/counterStore";
import { useRef } from "react";
export default function index() {
  // 使用数据
  const { count, list } = useSelector((state) => state.counter);

  const dispatch = useDispatch();

  const inputRef = useRef(null);

  const listAdd = () => {
    const val = inputRef.current.value;
    const action = addList(val);
    dispatch(action);
  };

  // const addCounter = () => {
  //   // 调用仓库中的 add 方法
  //   const action = add();
  //   dispatch(action);
  // };

  return (
    <div>
      {/* <h3>{count}</h3>
      <button onClick={addCounter}>+</button> */}

      <input type="text" ref={inputRef} />
      <button onClick={listAdd}>添加</button>
      <ul>
        {list.map((item) => {
          return <li key={item}>{item}</li>;
        })}
      </ul>
    </div>
  );
}
